<template>
  <div class="directive-box">
    <div class="title-line list-caption mt15 ml10 relative">
      统计要求
      <div class="title-oper">
        <IconButton
          :icon="visible.statRequire ? 'fold' : 'unfold'"
          :title="visible.statRequire ? '收起' : '展开'"
          :activated="false"
          @click.native="handleModuleToggle('statRequire')"
        ></IconButton>
      </div>
    </div>
    <div class="split-line mt18 mb18"></div>

    <div ref="statRequire_ref" class="ml40 f14">
      <span>反馈时间：</span>
      <DatePicker
        type="date"
        placeholder="开始时间"
        style="width: 200px"
        :disabled="viewDetails.isDetails"
        :value="datePickerDefaultVal[0]"
        @on-change="handleStartTime"
      ></DatePicker>
      <div class="split-line d-inline-block ml12 mr12" style="width: 36px; vertical-align: middle"></div>
      <DatePicker
        type="date"
        placeholder="结束时间"
        style="width: 200px"
        :disabled="viewDetails.isDetails"
        :value="datePickerDefaultVal[1]"
        :options="endTimeOptions"
        @on-change="handleEndTime"
      ></DatePicker>
      <!-- <template v-else>
        <div v-for="(item, i) of statList" :key="i" class="mb16">
          <span>统计数据时间：</span>
          <Input v-model="item.time" placeholder="请输入" style="width: 200px" clearable></Input>
          <div class="split-line d-inline-block ml12 mr12" style="width: 36px; vertical-align: middle"></div>
          <Input v-model="item.time" placeholder="请输入" style="width: 200px" clearable></Input>

          <span class="ml20">时间间隔：</span>
          <Input v-model="item.time" placeholder="请输入" style="width: 200px" clearable></Input>

          <Checkbox class="ml20" v-model="item.single">是否允许提前上报</Checkbox>
          <Checkbox class="ml12" v-model="item.single2">是否允许超时上报</Checkbox>

          <div class="d-inline-block ml12">
            <IconButton
              icon="remove"
              title="删除"
              width="15"
              height="17"
              :activated="false"
              @click.native="handleStatListRemove(i)"
            ></IconButton>
            <IconButton
              icon="plus"
              class="ml12"
              title="添加"
              width="17"
              height="17"
              :activated="false"
              @click.native="statList.splice(i + 1, 0, createStatItem())"
            ></IconButton>
          </div>
        </div>
      </template> -->
    </div>
  </div>
</template>

<script>
import { eleHightToggle } from '@/utils/dom.js'
import { dateIsAfter } from '@/utils/date.js'

const createStatItem = () => ({ time: '', single: true, single2: true })
export default {
  name: 'StatRequire',

  props: {
    viewDetails: Object,
  },

  data: () => ({
    formData: {
      startTime: '', // 执行开始时间
      endTime: '', // 执行结束时间
    },

    statList: [createStatItem()],

    visible: {
      statRequire: true,
    },
  }),

  computed: {
    from() {
      return this.$route.query.f
    },

    endTimeOptions() {
      return {
        disabledDate: (date) => {
          return date && dateIsAfter(this.formData.startTime, date)
        },
      }
    },

    datePickerDefaultVal() {
      return [this.formData.startTime, this.formData.endTime]
    },
  },

  watch: {
    viewDetails: {
      handler(v) {
        if (!v.isDetails) return
        Object.keys(this.formData).forEach((key) => (this.formData[key] = v.info[key]))
      },
      deep: true,
    },
  },

  methods: {
    handleModuleToggle(module) {
      this.$parent.moduleHeightToggle(this, module)
    },

    handleStartTime(date) {
      this.formData.startTime = date
    },
    handleEndTime(date) {
      this.formData.endTime = date
      // const isBefore = dateIsAfter(this.formData.startTime, this.formData.endTime)
      // console.log('is', isBefore)
    },

    handleStatListRemove(i) {
      if (this.statList.length < 2) return
      this.statList.splice(i, 1)
    },

    createStatItem,

    getParams() {
      return { ...this.formData }
    },
  },
}
</script>

<style lang="less" scoped></style>
